<template>
  <div>
    <van-nav-bar
      title="教练预约"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <van-search
      v-model="keywords"
      shape="round"
      placeholder="教练搜索"
      class="search"
      @update:model-value="searchzhujiao"
    >
    </van-search>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="zhujiaocontainer">
          <div
            class="zhujiaocard"
            v-for="(item, index) in currentlist"
            :key="index"
            @click="zhujiaodetail(item)"
          >
            <div
              v-bind:class="item.can_reserve ? 'zhujiaooktag' : 'zhujiaonotag'"
            >
              {{ item.can_reserve ? "可预约" : "不可预约" }}
            </div>
            <div class="image-container">
              <img class="zhujiaoimg" v-lazy="item.photo" alt="" />
            </div>
            <div class="zhujiaoinfo">
              <div class="zhujiaonickname">昵称：{{ item.nickname }}</div>
              <div class="levelbox">
                <div class="zhujiaolevel">{{ item.level }}</div>
                <div class="zhujiaoaixin">
                  <van-icon name="like-o" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { useStore } from "@/store/index.js";
import { getzhujiaoinfo } from "@/http/request.js";
import { showToast } from "vant";
export default {
  data() {
    return {
      value1: "",
      keywords: "",
      loading: false,
      finished: false,
      refreshing: false,
      currentpage: 1,
      allpages: 0,
      clubinfo: {},
      currentlist: [],
      zhujiaolist: [],
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    onLoad() {
      setTimeout(() => {
        this.loading = false;
        this.refreshing = false;
        if (this.currentpage == this.allpages) {
          this.finished = true;
        } else {
          let startpage = this.currentpage * 15;
          let endpage = this.currentpage * 15 + 15;
          if (endpage > this.zhujiaolist.length) {
            endpage = this.zhujiaolist.length;
          }
          for (let i = startpage; i < endpage; i++) {
            this.currentlist.push(this.zhujiaolist[i]);
          }
          this.currentpage += 1;
        }
      }, 1000);
    },
    zhujiaodetail(item) {
      this.$router.push({
        name: "ZhujiaoDetail",
        params: {
          zhujiaoinfo: JSON.stringify(item),
        },
      });
    },
    searchzhujiao(value) {
      this.currentlist = this.zhujiaolist.filter((zhujiao) =>
        zhujiao.nickname.includes(value)
      );
    },
    initZhujiaoinfo(id) {
      this.zhujiaolist = [];
      getzhujiaoinfo({ store_id: id }).then((res) => {
        if (res.data != null) {
          const datainfo = Object.keys(res.data.zhujiao_info).map(
            (zhujiao_id) => ({
              zhujiao_id: parseInt(zhujiao_id),
              ...res.data.zhujiao_info[zhujiao_id],
            })
          );
          for (var i = 0; i < datainfo.length; i++) {
            if (datainfo[i].zhujiao_grade == "1") {
              datainfo[i].level = "高级助教";
            } else if (datainfo[i].zhujiao_grade == "2") {
              datainfo[i].level = "中级助教";
            } else if (datainfo[i].zhujiao_grade == "3") {
              datainfo[i].level = "初级助教";
            }
            this.zhujiaolist.push(datainfo[i]);
          }

          this.allpages = Math.ceil(this.zhujiaolist.length / 15);
          this.currentlist = this.zhujiaolist.slice(0, 15);
        }
      });
    },
  },
  created() {
    this.clubinfo = JSON.parse(this.$route.params.clubinfo);
    this.initZhujiaoinfo(this.clubinfo.store_id);
  },
};
</script>

<style scoped>
.backbox {
  width: 100%;
  background-color: #f6f9ff;
  position: relative;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconsvg {
  position: absolute;
  left: 10px;
}
.backbox .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}
.searchinput {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: 100px;
  height: 40px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 5px !important;
}
.pullrefresh {
  min-height: calc(100vh - 40px);
  /* overflow: auto; */
  margin-bottom: 20px;
  background-color: #f2f3f5;
}
.zhujiaocontainer {
  width: 95%;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 调整项目之间的间距 */
  margin: 10px auto;
}

.zhujiaocard {
  width: calc(33.33% - 10px); /* 计算每个卡片的宽度，考虑到间距 */
  margin: 5px; /* 间距 */
  height: 160px;
  border-radius: 15px;
  background-color: white;
  position: relative;
}
.zhujiaooktag {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 16px;
  border-top-left-radius: 15px; /* 容器左上角圆角 */
  border-bottom-right-radius: 15px; /* 容器左上角圆角 */
  font-size: 10px;
  line-height: 16px;
  padding: 3px;
  color: white;
  background-color: #79a6fa;
}
.zhujiaonotag {
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 16px;
  border-top-left-radius: 15px; /* 容器左上角圆角 */
  border-bottom-right-radius: 15px; /* 容器左上角圆角 */
  font-size: 10px;
  line-height: 16px;
  padding: 3px;
  color: white;
  background-color: #b9babd;
}
.image-container {
  width: 100%;
  height: 120px; /* 设置容器高度为 100px */
  overflow: hidden; /* 超出容器的部分隐藏 */
  border-top-left-radius: 15px; /* 容器左上角圆角 */
  border-top-right-radius: 15px; /* 容器右上角圆角 */
}

.zhujiaoimg {
  width: 100%; /* 图片宽度填满容器 */
  height: auto; /* 高度自适应，保持宽高比 */
}
.zhujiaoinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  margin: 0 auto;
}
.zhujiaonickname {
  line-height: 18px;
  font-size: 14px;
  margin-left: 10px;
}
.levelbox {
  display: flex;
  justify-content: space-between;
  margin: 0 10px;
}
.zhujiaolevel {
  line-height: 18px;
  font-size: 14px;
}
.zhujiaoaixin {
  line-height: 18px;
  font-size: 18px;
}
</style>


<style>
.searchinput .van-field__left-icon .van-icon,
.van-field__right-icon .van-icon {
  line-height: 35px !important;
  font-size: 26px !important;
}
</style>